/**
* 溢出省略号
* @param {Number} 行数
*/
@mixin ellipsis($rowCount: 1) {
    @if $rowCount <=1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    } @else {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal !important;
        display: -webkit-box;
        word-wrap: break-word;
        -webkit-line-clamp: $rowCount;
        -webkit-box-orient: vertical;
    }
}

/**
* 真.1px边框
* {List}: 多个方向边框, 默认值为bottom, 你可以根据需要传入(top, left, bottom, right) 4个方向;
* {Color} 边框的颜色, 默认#ccc;
* {List} 4个圆角半径, 默认0;
* {String} 一个高级设置, 一般都不需要改动, 由于细边框的实现使用了css的伪类, 所以为了规避可能出现的样式冲突, 我们可以自己指定使用:after还是:before, 默认after;
* 使用
  1. @include thinBorder(); 底部1px边框
  2. @include thinBorder(top left right bottom); 四面1px边框
  3. @include thinBorder(top left right bottom, red); 四面1px边框,且颜色为red
  4. @include thinBorder(top left right bottom, red, 5px); 四面1px边框,且颜色为red, 四面radius为5px
  5. @include thinBorder(top left right bottom, red, (5px,5px,5px,5px)); 四面1px边框,且颜色为red, 四面radius为5px
  6. @include thinBorder(top left right bottom, red, (5px,5px,5px,5px), before); 四面1px边框,且颜色为red, 四面radius为5px, 且指定用before伪类
*/
@mixin thinBorder(
    $directionMaps: bottom,
    $color: #ccc,
    $radius: (
      0,
      0,
      0,
      0
    ),
    $position: after
) {
    // 是否只有一个方向
    $isOnlyOneDir: string==type-of($directionMaps);

    @if ($isOnlyOneDir) {
        $directionMaps: ($directionMaps);
    }

    @each $directionMap in $directionMaps {
        border-#{$directionMap}: 1PX solid $color;
    }

    // 判断圆角是list还是number
    @if (list==type-of($radius)) {
        border-radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4);
    } @else {
        border-radius: $radius;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        & {
            position: relative;

            // 删除1像素密度比下的边框
            @each $directionMap in $directionMaps {
                border-#{$directionMap}: none;
            }
        }

        &:#{$position} {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            box-sizing: border-box;
            padding: 1PX;
            transform-origin: 0 0;
            pointer-events: none;
            border: 0 solid $color;

            @each $directionMap in $directionMaps {
                border-#{$directionMap}-width: 1PX;
            }

            // 判断圆角是list还是number
            @if (list==type-of($radius)) {
                border-radius: nth($radius, 1) *
         2 nth($radius, 2) *
          2 nth($radius, 3) *
          2 nth($radius, 4) *
          2;
            } @else {
                border-radius: $radius * 2;
            }
        }
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
        &:#{$position} {
            // 判断圆角是list还是number
            @if (list==type-of($radius)) {
                border-radius: nth($radius, 1) *
          3 nth($radius, 2) *
          3 nth($radius, 3) *
          3 nth($radius, 4) *
          3;
            } @else {
                border-radius: $radius * 3;
            }

            width: 300%;
            height: 300%;
            transform: scale(0.3333);
        }
    }
}

@mixin border-top($color: #ccc){
    position: relative;
    &::before{
        content: '';
        position: absolute;
        height: 1PX;
        width: 100%;
        transform: scaleY(.5);
        background-color: $color;
        left: 0;
        top: 0;
    }
}

@mixin border-bottom($color: #ccc){
    position: relative;
    &::after{
        content: '';
        position: absolute;
        height: 1PX;
        width: 100%;
        transform: scaleY(.5);
        background-color: $color;
        left: 0;
        bottom: 0;
    }
}

/**
* 等边三角形
* @param {String} 尺寸
* @param {Color} 颜色
* @param {String} 方向
* 用法
* 1. @include triangle(); 使用border生成一个三角形，默认5px，朝下（默认）
* 2. @include triangle(10px); 使用border生成一个三角形，border-width为10px，朝下（默认）
* 3. @include triangle(10px, red); 使用border生成一个三角形，border-width为10px，颜色为red,朝下（默认）
* 4. @include triangle(10px, red, top); 使用border生成一个三角形，border-width为10px，颜色为red, 朝上
*/
@mixin triangle($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) {
    width: 0;
    height: 0;
    border-style: solid;

    @if (bottom==$dir) {
        border-width: $size $size 0 $size;
        border-color: $color transparent transparent transparent;
    } @else if (top==$dir) {
        border-width: 0 $size $size $size;
        border-color: transparent transparent $color transparent;
    } @else if (right==$dir) {
        border-width: $size 0 $size $size;
        border-color: transparent transparent transparent $color;
    } @else if (left==$dir) {
        border-width: $size $size $size 0;
        border-color: transparent $color transparent transparent;
    }
}

/**
* 清除浮动
* 用法
* 1.  @include clearfix()
*/
@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

/**
* 生成右边1px箭头
* @color {Color} 颜色, 默认#ccc
* @length {px} 尺寸, 默认20px
* @top {px} top值, 默认auto
* @right {px} right值, 默认auto
* @bottom {px} $bottom值, 默认auto
* @left {px} left值, 默认auto
* 用法
* 1.  @include rightArrow(#000, 20px, 6px,0)  生成尺寸为20px,top=6px,right=0的箭头
 */
@mixin rightArrow($color: #ccc, $length: 20px, $top: auto, $right: auto, $bottom: auto, $left: auto){
    &:after {
        position: absolute;
        content: '';
        top: $top;
        right: $right;
        bottom: $bottom;
        left: $left;
        width: $length;
        height: $length;
        //border-radius: 2PX;
        border-top: 1PX solid $color;
        border-right: 1PX solid $color;
        transform: rotate(45deg);
    }
}

/**
* 生成圆点
* @color {Color} 颜色, 默认#ccc
* @width {px} 直径, 默认10px
* @top {px} top值, 默认auto
* @right {px} right值, 默认auto
* @bottom {px} $bottom值, 默认auto
* @left {px} left值, 默认auto
* 用法
* 1.  @include dot(#000, 20px, 6px,0)  生成直径为20px,top=6px,right=0的圆点
 */
@mixin dot($color: #ccc, $width: 10px, $top: auto, $right: auto, $bottom: auto, $left: auto){
    &:before {
        position: absolute;
        content: '';
        top: $top;
        right: $right;
        bottom: $bottom;
        left: $left;
        width: $width;
        height: $width;
        background-color: $color;
        border-radius: 50%;
    }
}
